<template>
	<view>
		<page-head :title="'我的套餐'" :headtype="2"></page-head>
		<view class="meallist">
			<view class="dritem marginAuto" v-for="(item,index) in datas" :key="index" v-show="item.pay_status == 2">
				<view class="dritemgoods flex">
					<view class="cardeachbimg">
						<image class="goodsimg" :src="apifun.URLimg+item.menu_image" mode=""></image>
					</view>
					<view class="cardeachbmsg">
						<view class="cardeachbmsg-name flex">
							<view class="cardeachbmsg-namen ellipsis01">{{ item.menu_name }}</view>
							<view class="cardeachbmsg-namestatus mainColor" v-if="item.total-item.used_duration > 0">剩余{{ item.total-item.used_duration }}小时</view>
							<view class="cardeachbmsg-namestatus" style="color: #149E22;" v-if="item.total-item.used_duration <= 0">已用完</view>
						</view>
						<view class="starty">
							<view class="jlq">{{ item.min }}小时起约</view>
							<!-- <view class="jlq">{{ item.menu_sales_num }}已售</view> -->
						</view>
						<view class="cardeachbmsg-jl">
							<text style="color:#FC2A2A;font-size:24rpx;">￥</text>
							<text style="color:#FC2A2A;font-size:36rpx;">{{ item.menu_price }}</text>
							<text style="color:#666666;font-size:24rpx;margin-left: 20rpx;text-decoration: line-through;">￥{{ item.menu_old_price }}</text>
						</view>
						<view class="cardeachbmsg-site flex">
							<view class="site flex">有效期至：{{ item.menu_end_time }}</view>
							<view class="cardbtn flex" @click="selectmealfun(item)">
								<view class="cardbtneach mainBg baiColor">选择</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				page:1,
				datas:[]
			};
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData(){
				let sendData = {
					page:this.page,
					limit:this.apifun.limit,
					type:1
				};
				this.apifun.unirequest('/api/partnerDrive/getMyPartnerDriveList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.datas = [...this.datas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			selectmealfun(item){
				uni.$emit('acmeal',{data:item});
				setTimeout(()=>{
					this.apifun.goback()
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	.meallist{
		.dritem{
			width: 690rpx;
			padding:10rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			.dritem-top{
				justify-content: space-between;
				padding: 10rpx 0;
				.dritemtl{
					.jlq{
						display: inline-block;
						padding:0 10rpx;
						background:#FFEFE4;
						color:#FF720C;
						font-size:20rpx;
						border-radius:6rpx;
						height:50rpx;
						line-height:50rpx;
						margin-right: 10rpx;
					}
					.dritemtltxt{
						font-size: 28rpx;
						color: #222222;
						line-height: 50rpx;
					}
				}
				.dritemtr{
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
			.dritemgoods{
				padding: 20rpx 0;
				.cardeachbimg{
					position: relative;
					width: 240rpx;
					height: 210rpx;
					.xxhf{
						position: absolute;
						z-index: 10;
						left: -10rpx;
						top:8rpx;
						height: 50rpx;
					}
					.goodsimg{
						width: 240rpx;
						height: 210rpx;
						border-radius:10rpx;
					}
				}
				.cardeachbmsg{
					flex: 1;
					margin-left: 20rpx;
					.cardeachbmsg-name{
						color: #333333;
						font-size:30rpx;
						line-height: 50rpx;
						justify-content: space-between;
						.cardeachbmsg-namen{
							width:60%;
							font-weight: 600;
						}
						.cardeachbmsg-namestatus{
							font-size: 26rpx;
						}
					}
					.starty{
						padding:5rpx 0;
						.jlq{
							display: inline-block;
							padding:0 10rpx;
							background:#E7F2FF;
							color:#0089FB;
							font-size:20rpx;
							border-radius:6rpx;
							height: 40rpx;
							line-height: 40rpx;
							margin-right: 10rpx;
						}
					}
					.cardeachbmsg-jl{
						padding-top: 10rpx;
						font-size: 26rpx;
						line-height:40rpx;
					}
					.cardeachbmsg-site{
						justify-content: space-between;
						line-height:50rpx;
						.site{
							font-size: 24rpx;
							color:#999999;
							line-height:50rpx;
						}
						.cardbtn{
							.cardbtneach{
								width: 120rpx;
								height: 50rpx;
								line-height: 50rpx;
								font-size:28rpx;
								text-align: center;
								border-radius: 100rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
			.drbtn{
				justify-content: end;
				.cardbtneach{
					width: 140rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size:28rpx;
					text-align: center;
					border-radius: 100rpx;
					margin-left: 20rpx;
					border: 1px solid #1686F8;
				}
			}
		}
	}
</style>